<template>
	<view class="page">
		<headerinfo></headerinfo>
		<!-- <headertop :inv="5"></headertop> -->
		<backos></backos>
		<!-- <u-navbar title="编辑资料" :placeholder="true" :autoBack="true"></u-navbar> -->
		<view class="changeMy">
			<view class="touxiang">
				<view class="images">
					<!-- 	<avatar  selWidth="150rpx" selHeight="150rpx"
						@upload="chooseImg" :avatarSrc="userData.avatar?userData.avatar:'/static/images/logo.png'"
						avatarStyle="width: 150rpx; height: 150rpx; border-radius: 100%;">
					</avatar> -->
					<el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false"
						:on-change="handlePreview">
						<image :src="userData.avatar?userData.avatar:'/static/images/logo.png'" mode="aspectFill"
							style="width: 150rpx;height: 150rpx;"></image>
					</el-upload>
					<!-- <vuecropper
					      ref="cropper"
					      :src="userData.avatar?userData.avatar:'/static/images/logo.png'"
					    ></vuecropper> -->
					<!-- <image class="portrait" v-if="userData.avatar" :src="userData.avatar" mode="aspectFill"></image> -->
					<!-- <view class="defaultTx" v-else>
						<span>{{userData.realname?userData.realname:userData.nickname}}</span>
					</view> -->
					<!-- <view class="mark"></view>
					<i class="iconfont imgIcon">&#xe672;</i> -->

				</view>

				<view class="">点击更换头像</view>
			</view>
			<u-cell title="昵称" @click="toPage(`/pages/changeMy/editmyname?nickname=${userData.nickname}`)"
				:value="userData.nickname" :isLink="true"></u-cell>
			<u-cell title="用户名" :value="userData.username"></u-cell>
			<u-cell title="个人信息" @click="toPage(`/pages/changeMy/editmyrealname`)" :isLink="true"></u-cell>
			<u-cell title="手机号和密码" @click="toPage(`/pages/tabbar/mine/accountsafe`)" :isLink="true"></u-cell>
			<u-cell title="更换我的背景图" @click="show = true" :isLink="true"></u-cell>
			<!-- #ifdef MP-WEIXIN -->
			<u-cell title="绑定微信" @click="bindwechat" :isLink="true"></u-cell>
			<!-- #endif -->

		</view>

		<u-action-sheet @close="show = false" @select="selectClick" :closeOnClickOverlay="true"
			:closeOnClickAction="true" :actions="sheetlist" cancelText="取消" :show="show"></u-action-sheet>
		<w-compress ref='wCompress' />

		<el-dialog title="裁剪头像" :visible.sync="dialogVisible" width="500">
			<vueCropper class="crop-box" ref="cropper" :img="avatar" :autoCrop="options.autoCrop"
				:fixedBox="options.fixedBox" :canMoveBox="options.canMoveBox" :autoCropWidth="options.autoCropWidth"
				:autoCropHeight="options.autoCropHeight" :centerBox="options.centerBox" :fixed="options.fixed"
				:fixedNumber="options.fixedNumber" :canMove="options.canMove" :canScale="options.canScale"></vueCropper>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="gengxImg">确 定</el-button>
			</span>
		</el-dialog>

	</view>
</template>

<script>
	import minxins from '../../../common/upload.js';
	import WCompress from '@/components/w-compress/w-compress.vue'
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import {
		VueCropper
	} from 'vue-cropper'
	export default {
		mixins: [minxins],
		components: {
			WCompress,
			avatar,
			VueCropper
		},
		data() {
			return {
				avatar:'',
				dialogVisible: false,
				options: {
					autoCrop: true, // 默认生成截图框
					fixedBox: false, // 固定截图框大小
					canMoveBox: true, // 截图框可以拖动
					autoCropWidth: 200, // 截图框宽度
					autoCropHeight: 200, // 截图框高度
					fixed: true, // 截图框宽高固定比例
					fixedNumber: [1, 1], // 截图框的宽高比例
					centerBox: true, // 截图框被限制在图片里面
					canMove: false, // 上传图片不允许拖动
					canScale: false // 上传图片不允许滚轮缩放
				},
				show: false,
				userData: {
					avatar: '',
					username: '',
					realname: '',
					nickname: ''
				},
				// 操作栏
				sheetlist: [{
					name: '从默认图库选择',
				}, {
					name: '从手机相册选择'
				}],
			};
		},
		created() {
			this.getData();
		},
		methods: {
			handlePreview(file) {
				
				this.avatar = URL.createObjectURL(file.raw)

				this.dialogVisible = true
			},
			gengxImg() {
				this.$refs.cropper.getCropBlob(data => {
					console.log(data)

					const tempFilePaths = URL.createObjectURL(data);

					// 限制 300K
					var fileName = Date.now() + '_' + Math.round(Math.random() *
						100000000) + '.' + 'cejdjwqij' + '.png'


					var familyId = uni.getStorageSync('familyId') ? uni
						.getStorageSync('familyId')[0] : ''


					this.uploadUserImage(tempFilePaths, 'image', fileName, '', (
						avatarUrl) => {
						this.$api.changeAvatar({
							avatarUrl
						}).then(res => {
							this.dialogVisible = false
							this.$message.success('修改成功')
							this.getData()
						})
					})

				})
			},
			selectClick(e) {
				console.log(e)
				if (e.name == '从默认图库选择') {
					uni.navigateTo({
						url: '/pages/tabbar/mine/mybg'
					})
				} else if (e.name == '从手机相册选择') {
					uni.chooseImage({
						count: 1,
						success: res => {
							// #ifdef MP-WEIXIN

							this.$refs.wCompress.start(res.tempFilePaths).then(res2 => {
								res2.forEach((item, index) => {
									var fileName = Date.now() + '_' + Math.round(Math
										.random() * 100000000) + '.' + item.substring(item
										.lastIndexOf('.') + 1)

									var maxImageMegBytes = uni.getStorageSync(
										'maxImageMegBytes') ? uni.getStorageSync(
										'maxImageMegBytes') : 20

									var resSize = res.tempFiles[index].size;
									if (resSize > maxImageMegBytes * 1024 * 1024) {
										uni.showToast({
											title: `大小不能超过${maxImageMegBytes}MB`,
											icon: 'none'
										});
										return
									}

									var familyId = uni.getStorageSync('familyId') ? uni
										.getStorageSync('familyId')[0] : ''

									this.uploadUserImage(item, 'image', fileName, familyId, (
										imgUrl) => {
										uni.navigateTo({
											url: `/pages/tabbar/mine/mybgyulan?url=${imgUrl}`
										})
									})
								})
							})
							// #endif



							// #ifdef H5
							let fileName = res.tempFiles[0].name
							let path = res.tempFilePaths[0]
							//上传头像
							this.uploadUserImage(path, 'image', fileName, '', (
								imgurl) => {
								uni.navigateTo({
									url: `/pages/tabbar/mine/mybgyulan?url=${imgurl}`
								})
							})
							// #endif


						}
					})
				}
			},
			bindwechat() {
				uni.login({
					provider: "weixin",
					success: (res) => {
						console.log(res)
						let data = {
							code: res.code,
							provider: 'wxmp'
						}
						this.$api.otherBind(data).then(res2 => {
							console.log(res2)
							this.$Show.show('绑定成功')
						})
					}
				})
			},
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.myInfo().then(res => {
					this.userData = res;
					this.avatar = this.userData.avatar
					uni.hideLoading()
				});
			},
			chooseImg(e) {
				console.log(e.path)
				var fileName = Date.now() + '_' + Math.round(Math.random() * 100000000) + '.' + e.path.substring(e.path
					.lastIndexOf('.') + 1)

				this.uploadUserImage(e.path, 'image', fileName, '', (
					avatarUrl) => {
					this.$api.changeAvatar({
						avatarUrl
					}).then(res => {
						this.$Show.show('修改成功')
						this.getData()
					})
				})

				// uni.chooseImage({
				// 	count: 1,
				// 	success: res => {
				// 		console.log(res)
				// 		// #ifdef MP-WEIXIN

				// 		this.$refs.wCompress.start(res.tempFilePaths).then(res2 => {
				// 			res2.forEach((item, index) => {
				// 				var fileName = Date.now() + '_' + Math.round(Math.random() *
				// 					100000000) + '.' + item.substring(item.lastIndexOf(
				// 					'.') + 1)

				// 				var maxImageMegBytes = uni.getStorageSync('maxImageMegBytes') ?
				// 					uni.getStorageSync('maxImageMegBytes') : 20

				// 				var resSize = res.tempFiles[index].size;
				// 				if (resSize > maxImageMegBytes * 1024 * 1024) {
				// 					uni.showToast({
				// 						title: `大小不能超过${maxImageMegBytes}MB`,
				// 						icon: 'none'
				// 					});
				// 					return
				// 				}

				// 				var familyId = uni.getStorageSync('familyId') ? uni
				// 					.getStorageSync('familyId')[0] : ''



				// 			})
				// 		})
				// 		// #endif



				// 		// #ifdef H5
				// 		let fileName = res.tempFiles[0].name
				// 		let path = res.tempFilePaths[0]
				// 		//上传头像
				// 		this.uploadUserImage(path, 'image', fileName, '', (avatarUrl) => {
				// 			this.$api.changeAvatar({
				// 				avatarUrl
				// 			}).then(res => {
				// 				this.$Show.show('修改成功')
				// 				this.getData()
				// 			})
				// 		})
				// 		// #endif

				// 	}
				// })
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
	}

	.kaiguanlist {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e6e6e6;
	}

	.changeMy {
		width: 600px;
		margin: 0 auto;
		border: 1px solid #f8f8f8;
		box-shadow: 0 0 3px #ccc;
		margin-top: 40rpx;
		border-radius: 20rpx;

		.touxiang {
			display: flex;



			flex-direction: column;
			align-items: center;
			font-size: 30rpx;
			margin-bottom: 20rpx;

			.images {
				width: 150rpx;
				height: 150rpx;
				position: relative;
				margin: 40rpx 0;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 0 0px 9px #e4e4e4;
			}

			.mark {
				background-color: rgba(0, 0, 0, 0.2);
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				z-index: 10;
			}

			.imgIcon {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 100;
				color: #fff;
				font-size: 60rpx;
			}

			.portrait {
				width: 100%;
				height: 100%;
				margin-bottom: 30rpx;
				box-shadow: 0 3px 3px #ccc;
			}

			.defaultTx {
				width: 100%;
				height: 100%;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #e3d803;
				color: #fff;
			}
		}
	}

	.crop-box {
		width: 400px;
		height: 400px;
		margin: 0 auto;
	}
</style>